<template>
    <div id="helpRegister">
        <div class="tips fs-12 fw-400">
            提示：为保障用户权益，请勿恶意注册他人账户，一经发现将会封禁你的当前登录账户，并清空你的所有奖励。
        </div>

        <div class="login-form dis-flex flex-dir-column flex-y-center">
            <van-form @submit="onSubmit" ref="form">
                <van-field
                    v-model="phone"
                    name="phone"
                    label="手机号"
                    placeholder="请输入本人实名的手机号"
                    maxlength="11"
                    :rules="[
                        { required: true, message: '请填写手机号' },
                        {
                            validator: validatorPhone,
                            message: '请输入有效的手机号',
                        },
                    ]"
                />
                        <van-field
                    v-model="idcard"
                    name="idcard"
                    label="设置密码"
                    maxlength="18"
                    placeholder="请输入您的新密码"
                    :rules="[
                        { required: true, message: '请填写新密码' },
                        {
                            validator: validatorID,
                            message: '请输入有效的身份证号',
                        },
                    ]"
                />
                <van-field
                    v-model="phone"
                    name="phone"
                    label="确认密码"
                    placeholder="请再次输入新密码"
                    maxlength="11"
                    :rules="[
                        { required: true, message: '请再次输入新密码' },
                        {
                            validator: validatorPhone,
                            message: '请输入有效的手机号',
                        },
                    ]"
                />
            </van-form>
            <van-button
                class="common-btn-big fw-600 b-red"
                :loading="loading"
                type="primary"
                loading-type="spinner"
                loading-text="确认开通"
                @click="onCertifity"
                >确认开通</van-button
            >
        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import router from '@/router';
    export default {
        props: [], // 父辈向子辈传参
        name: 'bind',
        components: { // 组件的引用

        },
        data() {
            return {
                name: '',
                idcard: '',
                phone: '',
                show: false,
                loading: false,
                code: ''
            }
        },
        methods: {
            validatorID(val) {
                let IDRe18 = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$/;
                let IDRe15 = /^[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}$/;
                return (IDRe18.test(val) || IDRe15.test(val))
            },
            validatorPhone(val) {
                return /^1[3456789]\d{9}$/.test(val)
            },
            onSubmit() {

            },
            clickScanner() {
                this.show = true
            },

            onCertifity() {
                let token = this.$store.state.user.token
                console.log("token", token);
                this.$refs.form.validate().then(() => {
                    // 成功时的程序
                    let params = {
                        realName: this.name,
                        identificationCard: this.idcard,
                        realNamePhone: this.phone,
                        code: this.code,
                    }

                    if (!token) {
                        console.log("无授权");
                        params.encryptedIdentityData = window.location.href
                    }

                    console.log("params", params);
                    // Toast.loading({
                    //     message: '认证中...',
                    //     forbidClick: true,
                    // });
                    this.loading = true
                    this.$api.app.realNameApi(params).then((res) => {
                        console.log("实名结果", res);
                        // this.getUserInfo()
                        Toast.success({
                            message: '实名成功',
                            forbidClick: true,
                        });
                        setTimeout(() => {
                            Toast.clear()
                            this.loading = false
                            console.log("返回");
                            // window.history.go(-1);
                            this.$router.go(-1)
                        }, 2000)
                        // this.$router.push('/certifityRes')
                    }).catch((err) => {
                        console.log("实名错误", err);
                        this.loading = false
                        Toast(err.message)
                    });
                }).catch((err) => {
                    //失败时的程序
                    console.log("err", err);
                })
            },
            async getCode() {
                let code = this.$utils.func.getParamFromUrl(window.location.href.split("#")[0], "code")
                let mark = this.$store.state.app.realMark
                console.log("页面获取的code", code, '获取的标记', mark);
                // if (code && mark == 1) {
                //     // 有code且已授权
                //     this.code = code
                // }
                if (code) {
                    // 有code且已授权
                    this.code = code
                }
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
            this.getCode()
        },
    }
</script>
    
<style scoped lang='scss'>
    .van-button--primary {
        border: none;
        background: linear-gradient(180deg, #f53137, #f53137);
        margin-top: 45px !important;
    }
    #helpRegister {
        height: 100vh;
    }
    .tips {
        width: 375px;
        background: #ffefe6;
        color: #ff6619;
        line-height: 18px;
        padding: 14px 16px;
        box-sizing: border-box;
        .name {
            color: #f53137;
        }
    }
    .login-form {
        .van-form {
            width: 100%;
        }
        .van-cell {
            width: 100%;
            height: 48px;
            padding: 0 20px;
            display: flex;
        }
        .van-field {
            display: flex;
            align-items: center;
            & > img {
                width: 24px !important;
                height: 24px !important;
                margin-right: 16px;
            }
        }

        ::v-deep .van-field__value {
            display: flex;
            flex-direction: column;
            justify-content: center;
            // align-items: center;
            padding: 0;
            box-sizing: border-box;
            flex: 1;
            font-size: 14px;
        }

        ::v-deep .van-field__label {
            font-weight: 500;
            font-size: 14px;
            color: #3b3d3d;
            line-height: 20px;
        }

        ::v-deep .van-field__body {
            width: 100%;
            .van-field__control::-webkit-input-placeholder {
                font-weight: 400;
                font-size: 14px;
                color: #b6bdbd;
                line-height: 12px;
            }
        }

        .common-btn-big {
            margin-top: 45px;
        }
    }

    .van-dialog {
        width: 270px;
        height: 224px;
        background: #ffffff;
        border-radius: 6px;
        ::v-deep .van-dialog__header {
            padding-top: 25px !important;
            font-weight: bold;
            font-size: 17px;
            color: #1d2129;
        }
        .dialog-content {
            flex: 1;
            & > div {
                font-size: 15px;
                color: #4e5969;
                line-height: 22px;
                text-align: center;
                font-style: normal;
            }
            & > img {
                width: 238px;
                height: 34px;
                margin-top: 16px;
            }
        }
        ::v-deep .van-dialog__footer {
            border-top: 1px solid #e5e6eb;
            margin-top: 24px;
            height: 45px !important;
            .van-button__text {
                font-weight: 400;
                font-size: 18px;
                color: #0077ff;
            }
        }
    }
</style>